<template>
    <div id="movie-detail">
      <div class="top">
        <span class="icon-back" @click="$router.go(-1)"></span>
        <span class="name">{{jsonData.filmName}}</span>
      </div>
      <div class="info">
        <img :src="jsonData.poster" alt="">
        <div class="describe">
          <div class="name">{{jsonData.filmName}}</div>
          <div class="small type">类型：{{jsonData.type}}</div>
          <div class="small ellipsis">导演：{{jsonData.director}}</div>
          <div class="small ellipsis">主演：{{jsonData.leadingRole}}</div>
          <div class="small play-time">片长：{{jsonData.duration}}分钟</div>
          <div class="small show-time">上映日期：{{jsonData.releaseTime}}</div>
        </div>
      </div>
      <div class="action">
        <div class="btn" :class="{'active':ShowExpectBtn}" @click="wishBtnHandle"><span class="icon-like-fill"></span>
          <span>{{ShowExpectBtn?'已想看':'想看'}}</span>
        </div>
        <div class="btn" :class="{'active':currentUserCommentDate.id !=null}" @click="watchedBtnHandle"><span class="icon-star-fill"></span>
          <span>{{currentUserCommentDate == ''?'看过':'已看过'}}</span>
        </div>
      </div>
      <div class="public-praise">
        <div class="header">
          <div class="title">口碑</div>
          <div class="wish" v-if="isShowMovie">
            <span v-if="jsonData.expectNum != 0 ">{{jsonData.expectNum==1 ?jsonData.expectNum+1:jsonData.expectNum}}人想看</span>
            <span v-else>暂无想看</span>
          </div>
        </div>
          <div class="mark" v-if="isShowMovie">
            <div class="left">
              <el-rate v-model="starValue" allow-half:disabled="true"/>
            </div>
            <div class="right">
              <div class="score">{{jsonData.averageScore?jsonData.averageScore:0}}<span class="small">分</span></div>
              <!-- <div class="score-people">{{commentNum?commentNum:'暂无'}}人评</div> -->
            </div>
          </div>
          <div class="wish" v-else>
            <!-- <span class="wish-number"><span v-if="jsonData.expectNum" style="font-family: PingFangSC-Regular, Hiragino Sans GB, sans-serif;font-size: .6rem">
              {{jsonData.expectNum}}</span>
            <span v-else>暂无</span></span>人想看 -->
          </div>
      </div>
      <div class="intro">
        <div class="title">简介</div>
        <div class="content">
          {{jsonData.introduction}}
        </div>
      </div>
      <div class="comment">
        <div class="header">
          <span class="title">评论</span>
          <div v-if="currentUserCommentDate == '' ">
          <span  class="join" @click="watchedBtnHandle">参与评论</span>
          </div>
        </div>
        <div class="content">
          <div class="comment-container" v-if="currentUserCommentDate.id != null">
            <span class="title">我的讨论</span>
            <div class="comment-item">
              <div class="left"><img :src="currentUserCommentDate.avatar" alt=""></div>
              <div class="right">
                <div class="user-name">{{currentUserCommentDate.userName}}</div>
                <div class="scored">给这部作品打了{{currentUserCommentDate.score}}分</div>
                <div class="comment-content">{{currentUserCommentDate.content}}</div>
                <div class="bottom">
                  <span class="comment-date">{{formatCommentDate(currentUserCommentDate.commentDate)}}</span>
                  <span class="support" :class="{'active':currentUserCommentDate.likeStatus == 1}" 
                  @click="supportBtnHandle(currentUserCommentDate)">
                  <span class="icon-support"></span><span class="number">
                    {{currentUserCommentDate.likeStatus == 1?currentUserCommentDate.likeNum+1:currentUserCommentDate.likeNum}}</span></span>
                </div>
              </div>
            </div>
          </div>
          <div class="comment-container comment-list-container" v-if="otherUserCommentDate.length">
            <span class="title">精选评论</span>
            <div class="comment-item" v-for="(comment,index) in otherUserCommentDate" :key="index">
              <div class="left"><img :src="comment.avatar" alt=""></div>
              <div class="right">
                <div class="user-name">{{comment.userName}}</div>
                <div class="scored">给这部作品打了{{comment.score}}分</div>
                <div class="comment-content">{{comment.content}}</div>
                <div class="bottom">
                  <span class="comment-date">{{comment.commentDate}}</span>
                  <span class="support" :class="{'active':comment.likeStatus == 1}" @click="supportBtnHandle(comment)">
                    <span class="icon-support"></span><span class="number">{{comment.likeStatus == 1?comment.likeNum+1:comment.likeNum}}</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <span class="tips" v-if="currentUserCommentDate.id != null || !otherUserCommentDate.length">
            <span v-if="! storage.get('x-token')">请登录后查看评论</span>
            <span v-else-if="currentUserCommentDate.id == null && otherUserCommentDate.length==0"> 暂无评论！</span>
          </span>
          
        </div>
      </div>
      <div class="buy">
        <div class="btn" @click="$router.push({path:'/select_cinema',query:{filmId:$route.query.filmId}})">特惠购票</div>
      </div>
    </div>
</template>

<script>
    import {
      getMovieDetail,
      isWishMovie,
      wishMovie,
      viewerGetMovieDetail,
      checkUserIsComment,
      cancelWishMovie,
      getUserComment,
      getAllUserPassComment,
      changeLikeStatus,
      updateUserSupport
    } from '../../api/index'
    import Vue from 'vue'
    import {Indicator,Toast} from 'mint-ui'
    import {Rate} from  'element-ui'
    import moment from 'moment';
import { formatDate } from '../../common/util/util';
    Vue.use(Rate)
    export default {
        name: "MovieDetail",
        data(){
          return{
            starValue:0,
            averageScore:0,
            commentNum:0,
            //服务器地址
           // server:'http://localhost:3000',
            jsonData:'',
            isShowMovie:false,
            ShowExpectBtn:true,
            currentUserCommentDate:'',
            otherUserCommentDate:[],
          }
        },
        created(){
          Indicator.open('Loading...');
          this.loadMovieDetail();
        },
        methods:{
          //加载电影详细信息
          async loadMovieDetail(){
            if(this.$route.query.filmId){
              //console.log(this.$route.query.filmId);
              if(this.storage.get("x-token")){
                let json = await getMovieDetail(this.$route.query.filmId);
                console.log(json);
                if (json.code===0){
                  this.jsonData = json.data;
                  //拼接tag值
                  if(this.jsonData.tags.length !=0){
                    let type ='';
                    this.jsonData.tags.forEach((tag,index)=>{
                      type =type+tag.value +","
                    })
                    //为对象添加新值
                    this.$set(this.jsonData,"type",type.substring(0, type.length - 1));
                  }
                  //判断电影是否上映
                  new Date()-new Date(this.jsonData.releaseTime)>=0?this.isShowMovie = true:this.isShowMovie = false;
                  if (this.isShowMovie){
                    this.starValue = this.jsonData.averageScore*0.5;
                  }
                    if (this.jsonData.isExpect == 1){
                      this.ShowExpectBtn = true;
                    } else{
                      this.ShowExpectBtn = false;
                    }
      
                  //获取当前用户的评论
                  let commentJson = await getUserComment(this.$route.query.filmId); 
                  //console.log(commentJson);
                    if (commentJson.code===0 && commentJson.data!=null){
                    this.currentUserCommentDate=commentJson.data;
                    console.log( this.currentUserCommentDate);
                    }
                  //赋最热评论 ? /所有评论?
                  //其他 / 精选评论
                  this.otherUserCommentDate = json.data.comments;
                  this.otherUserCommentDate.sort((a, b)=>{
                      return b.likeNum-a.likeNum
                    });

                }
              }else{
                 let json = await viewerGetMovieDetail(this.$route.query.filmId);
                  console.log(json);
                   if (json.code===0){
                    this.jsonData = json.data;
                    //拼接tag值
                    if(this.jsonData.tags.length !=0){
                      let type ='';
                      this.jsonData.tags.forEach((tag,index)=>{
                        type =type+tag.value +","
                      })
                      //为对象添加新值
                      this.$set(this.jsonData,"type",type.substring(0, type.length - 1));
                    }
                    //判断电影是否上映
                    new Date()-new Date(this.jsonData.releaseTime)>=0?this.isShowMovie = true:this.isShowMovie = false;
                    if (this.isShowMovie){
                      this.starValue = this.jsonData.averageScore*0.5;
                    }
                     this.ShowExpectBtn = false;
                   }
              }
            }
            Indicator.close();
          },
          //想看按钮处理
          async wishBtnHandle(){
        
            if (this.storage.get("x-token")){
              //不想看,未点击时
              if (this.ShowExpectBtn == false){
                let json = await wishMovie(this.$route.query.filmId,1);
                console.log(json);
                if (json.code=== 0){
                  this.ShowExpectBtn = true;
                   this.jsonData.expectNum = this.jsonData.expectNum +1;
                }
              } 
              //已想看,已点击时
              else {
                let json = await wishMovie(this.$route.query.filmId,0);
                console.log(json);
                if (json.code=== 0){
                  this.jsonData.isExpect==1;
                  this.ShowExpectBtn = false;
                  this.jsonData.expectNum = this.jsonData.expectNum -1;
                }
              }
            } else{
              this.$router.push('/login');
            }
          },
          //看过按钮处理
         async watchedBtnHandle(){
            //用户已登录
            if (this.storage.get("x-token")){
              let json = await checkUserIsComment(this.$route.query.filmId);
              console.log(json);
              if (json.data == true) {
                this.$router.push({path:'/comment_panel',query:{filmId:this.$route.query.filmId}});
              }else{
                 Toast({
                message: '您已经评论过了',
                position: 'top',
                duration: 1200
              });
              }
              
            } else{
              this.$router.push('/login');
            }
          },
          //点赞按钮处理
          async supportBtnHandle(comment){
            //console.log(localStorage.getItem("x-token"));
            
            if (this.storage.get("x-token")){
              let changedStatus
              if (comment.likeStatus == 1) {
                changedStatus=0;
              }else{
                changedStatus=1;
              }
              //不用传suerId, 后期网关会添加参数现在为了测试传参    
              let json = await changeLikeStatus(comment.id,changedStatus);
              console.log(json);
              // let supportUser,supportNum;
              //请求成功
              if (json.code===0){
                comment.likeStatus = changedStatus;
               // console.log(comment);
                }
               
            } else{
              this.$router.push('/login');
            }
          },
          //处理评论日期
          formatCommentDate(date){
            return formatDate(new Date(moment(date).format('YYYY-MM-DD HH:mm:ss')),false);
          }
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  #movie-detail
    width 100%
    height 100%
    background linear-gradient(to bottom, #242342 0%,#11182B 100%)
    color #fff
    font-size .3125rem
    .top
      width 100%
      height 1rem
      display flex
      justify-content center
      align-items center
      margin-bottom .2rem
      position fixed
      top 0
      left 0
      background-color #242342
      z-index 999
      .icon-back
       font-size .4rem
       position absolute
       left .3rem
    .info
      width 90%
      padding .2rem
      box-sizing border-box
      height 3rem
      margin 1rem auto 0
      background-color #fff
      display flex
      justify-content space-around
      align-items center
      color #333
      border-radius .2rem
      img
        width 28%
        box-sizing border-box
        border-radius .05rem
      .describe
        width 62%
        .name
          font-size .345rem
          font-weight 700
          margin-bottom .12rem
        .small
          font-size .28rem
          margin-bottom .12rem
    .action
      width 90%
      height 1rem
      margin 0 auto
      background-color #fff
      display flex
      justify-content space-around
      align-items center
      border-radius .2rem
      .btn
        font-size .4rem
        width 36%
        height .6rem
        border-radius .3rem
        background-color #ffb400
        display flex
        justify-content center
        align-items center
        &.active
          background-color #fff1d4
          color #fe9a02
        span:last-child
          font-size .25rem
          margin-left .1rem
    .public-praise
      width 90%
      height auto
      margin .2rem auto
      box-sizing border-box
      padding .25rem
      background-color #3a3a52
      border-radius .2rem
      .header
        display flex
        justify-content space-between
        align-items center
        margin-bottom .25rem
        .title
          font-weight bolder
        .wish
          font-size .25rem
          padding .04rem 0
      /deep/ .mark
        width 100%
        display flex
        justify-content space-between
        align-items flex-start
        .right
          display flex
          flex-direction column
          justify-content center
          align-items center
          .score
            font-size .68rem
            font-weight bolder
            color #ffb400
            margin-bottom .1rem
            .small
              font-size .25rem
          .score-people
            font-size .2rem
            color #ffb400
        .left
          display flex
          justify-content center
          align-items center
          color #ffb400
          i
            font-size .6rem
      .wish
        font-size .4rem
        padding .2rem 0
        vertical-align text-bottom
        line-height .48rem
        letter-spacing .04rem
        .wish-number
          font-size .48rem
          color #ffb400
          font-weight bolder
    .intro
      width 90%
      height auto
      margin .2rem auto
      box-sizing border-box
      padding .25rem
      background-color #3a3a52
      border-radius .2rem
      .title
        font-weight bolder
        color #fff
        margin-bottom .25rem
      .content
        text-align justify
        font-size .28rem
        line-height .4rem
    .comment
      width 100%
      box-sizing border-box
      padding .25rem
      height auto
      margin 0 auto
      background-color #fff
      color #333
      border-top-left-radius .2rem
      border-top-right-radius .2rem
      .header
        display flex
        justify-content space-between
        align-items center
        height 1rem
        .title
          font-weight bolder
          padding .25rem
        .join
          padding .14rem
          background-color #dd2727
          margin-right .25rem
          color #fff
          border-radius .12rem
          font-size .24rem
      .content
        width 100%
        padding .25rem
        padding-bottom 0
        box-sizing border-box
        margin-bottom 1rem
        .comment-container
          width 100%
          .title
            font-weight lighter
            font-size .25rem
            padding-bottom .25rem
          .comment-item
            display flex
            padding-top .25rem
            .left
              width 10%
              height 10%
              border-radius 50%
              overflow hidden
              img
                width 100%
                height 100%
            .right
              margin 0 .25rem .25rem
              font-size .3125rem
              width 100%
              .user-name
                font-size .25rem
                font-weight bolder
                margin-bottom .1rem
              .scored
                font-size .2rem
                font-weight lighter
                margin-bottom .1rem
              .comment-content
                font-size .28rem
                line-height .4rem
                margin-bottom .1rem
                text-align justify
              .bottom
                display flex
                justify-content space-between
                align-items center
                font-size .28rem
                .comment-date
                  font-size .24rem
                .support
                  padding .1rem
                  border 0.01rem solid #ccc
                  border-radius .24rem
                  &.active
                    color #dd2727
                    border 0.01rem solid #dd2727
                  .number
                    font-weight lighter
                    margin-left .1rem
                    font-size .25rem
        .tips
          font-size .25rem
    .buy
      position fixed
      bottom 0
      width 100%
      height 1rem
      background-color #fff
      color #fff
      display flex
      justify-content center
      align-items center
      .btn
        width 90%
        height .8rem
        background-color #dd2727
        display flex
        justify-content center
        align-items center
        border-radius .4rem
        font-weight light
</style>
